<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">
        
        <ui:define name="title"><h:outputText value="#{administrationBean.selectedSubCategory2.name}" /></ui:define>

        <ui:define name="header">
        </ui:define>

        <ui:define name="content">


            <h:form id="form">
                <p:growl id="growl" showDetail="false" life="3000" autoUpdate="true" />

                <ol class="breadcrumb adminPanel">
                    <li><p:commandLink value="Administration" action="back" /></li>
                    <li><p:commandLink value="Categories" action="categories" /></li>
                    <li><p:commandLink value="#{administrationBean.selectedCategory.name}" action="categories_subCategories" /></li>
                    <li><p:commandLink value="#{administrationBean.selectedSubCategory.name}" action="categories_subCategories2" /></li>
                    <li class="active">#{administrationBean.selectedSubCategory2.name}</li>
                </ol>

            <div class="content">
                <div class="adminPanel">
                    <p:commandButton value="Add Products" onsuccess="addProducts.show()" styleClass="adminPanelButton btn btn-success"/>
                </div>

                <div class="adminPanel">
                    <p:dataTable id="productsTable" var="p" value="#{administrationBean.selectedSubCategory2.products}" style="width:800px; margin: 10px;">

                        <p:column headerText="Product Number">
                            <h:outputText value="#{p.pno}" />
                        </p:column>

                        <p:column headerText="Description">
                            <h:outputText value="#{p.desc}" />
                        </p:column>

                        <p:column headerText="Remove" style="text-align: center;" width="10">
                            <p:commandLink actionListener="#{administrationBean.removeProductFromCategory(administrationBean.selectedSubCategory2,p)}" update="productsTable">
                                <i class="glyphicon glyphicon-remove" />
                            </p:commandLink>
                        </p:column>
                    </p:dataTable>
                </div>

            </div>




            <p:dialog id="addProducts" widgetVar="addProducts" modal="false" header="Add Products" resizable="true">
                <p:dataTable var="p" value="#{administrationBean.productModel}" style="width:800px; margin: 10px;" selectionMode="multiple" selection="#{administrationBean.selectedProducts}" scrollable="true" scrollHeight="500">

                    <!--<p:column selectionMode="multiple" width="5%" />-->

                    <p:column headerText="Product" width="15%">
                        <h:outputText value="#{p.pno}" />
                    </p:column>

                    <p:column headerText="Description" width="80%">
                        <h:outputText value="#{p.desc}" />
                    </p:column>

                </p:dataTable>
                <p:commandButton value="Save" actionListener="#{administrationBean.addProducts(administrationBean.selectedSubCategory2)}" onclick="addProducts.hide()" update="productsTable" styleClass="btn btn-success"/>
                <p:commandButton value="Calcel" onclick="addProducts.hide()" onsuccess="javascript:window.location.reload()" update="productsTable" styleClass="btn btn-danger"/>
            </p:dialog>







        </h:form>












        </ui:define>
        
</ui:composition>